<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head><meta name="generator" content="Hexo 3.9.0">

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Description-->
    
        <meta name="description" content="说明：后文中出现的以下字符串均表示具体的路径或者名称，含义如下：
DJANGO_DIR—表示django的工程根目录 例如：/data/DatalableDJANGO_NAME—表示django的工程名称 例如DatalableVUE_HTML_DIR—表示vue的index.html路径 例如:/">
    

    <!--Author-->
    
        <meta name="author" content="ck">
    

    <!--Open Graph Title-->
    
        <meta property="og:title" content="Djang0+Vue部署">
    

    <!--Open Graph Description-->
    

    <!--Open Graph Site Name-->
    <meta property="og:site_name" content="CK&#39;s blogs">

    <!--Type page-->
    
        <meta property="og:type" content="article">
    

    <!--Page Cover-->
    

    <meta name="twitter:card" content="summary">
    

    <!-- Title -->
    
    <title>Djang0+Vue部署 - CK&#39;s blogs</title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

    <!-- Custom Fonts -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Gallery -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.css" type="text/css" rel="stylesheet">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/blog/css/style.css">

    <!-- Google Analytics -->
    


</head>


<body>

<div class="bg-gradient"></div>
<div class="bg-pattern"></div>

<!-- Menu -->
<!--Menu Links and Overlay-->
<div class="menu-bg">
    <div class="menu-container">
        <ul>
            
            <li class="menu-item">
                <a href="/blog/">
                    Home
                </a>
            </li>
            
            <li class="menu-item">
                <a href="/blog/archives">
                    Archives
                </a>
            </li>
            
            <li class="menu-item">
                <a href="/blog/2019/09/04/本人简历/">
                    About
                </a>
            </li>
            
            <li class="menu-item">
                <a href="/blog/tags">
                    Tags
                </a>
            </li>
            
            <li class="menu-item">
                <a href="/blog/categories">
                    Categories
                </a>
            </li>
            
            <li class="menu-item">
                <a href="/blog/contact.html">
                    Contact
                </a>
            </li>
            
        </ul>
    </div>
</div>

<!--Hamburger Icon-->
<nav>
    <a href="#menu"></a>
</nav>

<div class="container">

    <!-- Main Content -->
    <div class="row">
    <div class="col-sm-12">

        <!--Title and Logo-->
        <header>
    <div class="logo">
        <a href="/blog/"><i class="logo-icon fa fa-cube" aria-hidden="true"></i></a>
        
    </div>
</header>

        <section class="main">
            
<div class="post">

    <div class="post-header">
        <h1 class="title">
            <a href="/blog/2019/07/06/djang0-Vue部署/">
                Djang0+Vue部署
            </a>
        </h1>
        <div class="post-info">
            
                <span class="date">2019-07-06</span>
            
            
            
        </div>
    </div>

    <div class="content">

        <!-- Gallery -->
        

        <!-- Post Content -->
        <p>说明：后文中出现的以下字符串均表示具体的路径或者名称，含义如下：</p>
<p>DJANGO_DIR—表示django的工程根目录 例如：/data/Datalable<br>DJANGO_NAME—表示django的工程名称 例如Datalable<br>VUE_HTML_DIR—表示vue的index.html路径 例如:/data/dist<br>VUE_STATIC_DIR—表示vue的static的路径 例如:/data/dist/static<br>修改配置文件nginx 打开 vim /etc/nginx/nginx.conf  在http中加入下面的配置文件</p>
<p>server {</p>
<pre><code>listen 8080;
server_name 132.232.50.225;
root /data/;
charset  utf-8;
access_log /data/access_narwhals.log;
error_log /data/error_narwhals.log;
client_max_body_size 75M;

location / {
        uwsgi_pass 127.0.0.1:9090;
        include /etc/nginx/uwsgi_params;
}

location ^~ /admin/ {
        uwsgi_pass 127.0.0.1:9090;
        include /etc/nginx/uwsgi_params;
}</code></pre><p>}</p>
<p>该配置中uwsgi_pass要指向uwsgi绑定的接口。（我们先假设uwsgi配置的是9090端口）</p>
<p>二、安装和配置uwsgi<br>安装<br>使用yum或者pip均可安装</p>
<p>yum install uwsgi</p>
<h1 id="或者"><a href="#或者" class="headerlink" title="或者"></a>或者</h1><p>pip install uwsgi</p>
<p>配置<br>uwsgi可以使用命令行启动，也可以使用配置文件来启动，推荐使用配置文件来启动守护进程，配置文件内容如下</p>
<p>[uwsgi]<br>socket = 127.0.0.1:9090</p>
<p>#<br>下面<br>IP<br>端口没弄明白做什么<br>stats = 127.0.0.1:9293<br>workers = 4</p>
<h1 id="项目根目录"><a href="#项目根目录" class="headerlink" title="项目根目录"></a>项目根目录</h1><p>chdir<br> = /test_service/DataLable<br>touch-reload = /test_service/DataLable<br>py-auto-reload = 1</p>
<h1 id="在项目跟目录和项目同名的文件夹里面的一个文件"><a href="#在项目跟目录和项目同名的文件夹里面的一个文件" class="headerlink" title="在项目跟目录和项目同名的文件夹里面的一个文件"></a>在项目跟目录和项目同名的文件夹里面的一个文件</h1><p>module= DataLable.wsgi<br>pidfile = /var/run/inner_manager.pid<br>daemonize = /data/uwsgi9090.log</p>
<h1 id="If-you-plan-to-receive-big-requests-with-lots-of-headers-you-can-increase-this-value-up-to-64k-65535"><a href="#If-you-plan-to-receive-big-requests-with-lots-of-headers-you-can-increase-this-value-up-to-64k-65535" class="headerlink" title="If you plan to receive big requests with lots of headers you can increase this value up to 64k (65535)."></a>If you plan to receive big requests with lots of headers you can increase this value up to 64k (65535).</h1><p>buffer-size=65535</p>
<p>这里以socket形式运行uwsgi，绑定了本地的9090端口，也就是上文nginx配置中uwsgi_pass指定的端口。</p>
<p>大概解释下几个配置的含义：</p>
<p>chdir—-应用加载前chdir到指定目录，一般设置为django的工程根目录<br>touch-reload—-如果修改/碰了指定的文件，那么重载uWSGI<br>module—-加载一个WSGI模块的路径，如果django的话就指向对应的wsgi文件模块<br>buffer-size—-设置请求的最大大小 (排除request-body)，这一般映射到请求头的大小。默认情况下，它是4k。如果你接收到了一个更大的请求 (例如，带有大cookies或者查询字符串)，那么你也许需要增加它。它也是一个安全度量，所以调整为你的应用需要，而不是最大输出。该值如果太小会报错<br>然后使用命令启动uwsgi进程，其中uwsgi.ini为上面内容的配置文件</p>
<p>uwsgi -i uwsgi.ini<br>可以看下日志文件有没有报错，或者看下ps -ef|grep uwsgi进程有没有跑起来。一定要确保进程正常run起来才行</p>
<p>至此，DJANGO已经通过nginx+uwsgi可以访问了</p>
<p>三、配置访问vue<br>其实这里访问编译好的vue静态文件有很多方式，本文主要讲述通过nginx直接访问和通过django路由访问</p>
<p>通过django路由访问<br>其实我们也可以直接通过<a href="http://ip:8080/" target="_blank" rel="noopener">http://ip:8080/</a> 来经由django的路由来访问vue的页面。当然要做到这样要确保以下配置的正确</p>
<p>找到DJANGO_DIR根目录下DJANGO_NAME同名文件夹下urls.py，使用通用视图创建最简单的模板控制器，增加一行路由</p>
<p>vim /test_service/DataLable/DataLable</p>
<p>url(r’^$’, TemplateView.as_view(template_name=”index.html”)),<br>上一步使用了Django的模板系统，所以需要配置一下模板使Django知道从哪里找到index.html。在project目录的settings.py下：</p>
<p>TEMPLATES = [<br>    {‘BACKEND’: ‘django.template.backends.django.DjangoTemplates’,<br>     ‘DIRS’: [‘/data/dist’],<br>     ‘APP_DIRS’: True,<br>     ‘OPTIONS’: {‘context_processors’: [<br>                ‘django.template.context_processors.debug’,<br>                ‘django.template.context_processors.request’,<br>                ‘django.contrib.auth.context_processors.auth’,<br>                ‘django.contrib.messages.context_processors.messages’,<br>           ],<br>        },<br>    },<br>]<br>按照上述配置完成后，结合前面配置好的nginx和uwsgi，你已经可以通过<a href="http://ip:8080/" target="_blank" rel="noopener">http://ip:8080/</a> 来访问到对应的vue编译好的VUE_HTML_DIR目录下的index.html了，但是这时候你可能会有其他困扰，比如找不到css样式文件的问，这经常是静态配置有误导致找不到静态文件的问题。</p>
<p>Django通过django.contrib.staticfiles来管理静态文件，首先确保django.contrib.staticfiles已经添加到INSTALLED_APPS。默认都是有的</p>
<p>然后可以在DJANGO的配置文件settings.py中增加以下几个配置：</p>
<p>STATIC_URL = ‘/static/‘<br>STATIC_ROOT = os.path.join(BASE_DIR, “static”)</p>
<h1 id="Add-for-vuejs"><a href="#Add-for-vuejs" class="headerlink" title="Add for vuejs"></a>Add for vuejs</h1><p>STATICFILES_DIRS = [<br>    ‘/data/dist/static’,<br>    # other static folders</p>
<p>]</p>
<p>STATIC_URL对外提供WEB访问时static的URL地址<br>STATIC_ROOT设置绝对路径, 用来保存收集到的静态文件，服务器最终也将从该路径中获取文件进行转发。在collectstatic运行的时候会把STATICFILES_DIRS中的静态文件拷贝到这个目录中,达到从开发环境到生产环节过程中移植静态文件的作用。<br>STATICFILES_DIRS用来配置一些开发环境下生成的静态文件的地址，即编译好的VUE_STATIC_DIR<br>在url.py中添加路由</p>
<p>from django.views.static import server </p>
<p>url(r’^static/(?P<path></path>.*)$’, static.serve,{‘document_root’: settings.STATIC_ROOT}, name=’static’),</p>
<p>配置好以上配置后，编译好的静态文件还在VUE_STATIC_DIR目录下，我们最终要执行下面命令才能把STATICFILES_DIRS中的静态文件拷贝到STATIC_ROOT这个目录中，也就是最终生产环境指定的static的存放目录</p>
<p>python manage.py collectstatic<br>这样你访问django的admin网址<a href="http://ip:8080/admin" target="_blank" rel="noopener">http://ip:8080/admin</a> 时，也不会出现找不到css的问题了</p>
<p>当然这种方式其实是通过django的路由来访问静态文件的，一般的，生产环境不会通过django来转发静态文件，而是通过其他服务器进行转发，比如nginx，apache等</p>
<p>通过nginx直接访问</p>
<p>如果你想直接通过nginx访问对应的前端vue文件，可以重新配置一个server来访问对应的html文件，比如上面已经使用了8080端口，我们可以用默认的80端口来配置个server，其中root可以指向存放index.html文件的路径，/static/路径下的root路径可以指向html对应的存放css和js的static文件夹，如果static就在index.html路径下，不指认也可以。直接修改/etc/nginx.conf即可，里面已经有配置好的80端口的server</p>
<p>配置如下所示</p>
<p>server {<br>        listen       80 default_server;<br>        listen       [::]:80 default_server;<br>        server_name  _;<br>        root         /usr/share/nginx/html;<br>        # Load configuration files for the default server block.<br>        include /etc/nginx/default.d/*.conf;<br>        location / {<br>        root /test_service/dist;<br>        index index.html;<br>        }<br>        error_page 404 /404.html;<br>            location = /40x.html {<br>        }<br>        error_page 500 502 503 504 /50x.html;<br>            location = /50x.html {<br>        }</p>
<p>这样我们可以通过<a href="http://ip:80/" target="_blank" rel="noopener">http://ip:80/</a> 来访问vue编译好的页面，使用<a href="http://ip:8080/" target="_blank" rel="noopener">http://ip:8080/</a> 访问django配置的cgi请求</p>

    </div>

    

    
        <div class="post-tags">
            <i class="fa fa-tags" aria-hidden="true"></i>
            <a href="/blog/tags/Djiango-Vue/">#Djiango+Vue</a> <a href="/blog/tags/Djiango/">#Djiango</a> <a href="/blog/tags/Vue/">#Vue</a>
        </div>
    

    <!-- Comments -->
    

</div>
        </section>

    </div>
</div>


</div>

<!-- Footer -->
<div class="push"></div>

<footer class="footer-content">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 footer-about">
                <h2>About</h2>
                <p>
                    This theme was developed by <a href="https://github.com/klugjo">Jonathan Klughertz</a>. The source code is available on Github. Create Websites. Make Magic.
                </p>
            </div>
            
    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 recent-posts">
        <h2>Recent Posts</h2>
        <ul>
            
            <li>
                <a class="footer-post" href="/blog/2019/10/25/tars框架环境基础搭建/">tars框架环境基础搭建</a>
            </li>
            
            <li>
                <a class="footer-post" href="/blog/2019/10/20/认识tars框架/">认识tars框架</a>
            </li>
            
            <li>
                <a class="footer-post" href="/blog/2019/10/05/redis数据迁移备份与恢复/">redis数据迁移备份与恢复</a>
            </li>
            
            <li>
                <a class="footer-post" href="/blog/2019/09/21/负载均衡的5种策略/">负载均衡的5种策略</a>
            </li>
            
        </ul>
    </div>



            
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <ul class="list-inline footer-social-icons">
                    
                    <li class="list-inline-item">
                        <a href="https://github.com/klugjo/hexo-theme-alpha-dust">
                            <span class="footer-icon-container">
                                <i class="fa fa-github"></i>
                            </span>
                        </a>
                    </li>
                    
                    
                    <li class="list-inline-item">
                        <a href="https://twitter.com/?lang=en">
                            <span class="footer-icon-container">
                                <i class="fa fa-twitter"></i>
                            </span>
                        </a>
                    </li>
                    
                    
                    <li class="list-inline-item">
                        <a href="https://www.facebook.com/">
                            <span class="footer-icon-container">
                                <i class="fa fa-facebook"></i>
                            </span>
                        </a>
                    </li>
                    
                    
                    <li class="list-inline-item">
                        <a href="https://www.instagram.com/">
                            <span class="footer-icon-container">
                                <i class="fa fa-instagram"></i>
                            </span>
                        </a>
                    </li>
                    
                    
                    <li class="list-inline-item">
                        <a href="https://dribbble.com/">
                            <span class="footer-icon-container">
                                <i class="fa fa-dribbble"></i>
                            </span>
                        </a>
                    </li>
                    
                    
                    <li class="list-inline-item">
                        <a href="https://plus.google.com/">
                            <span class="footer-icon-container">
                                <i class="fa fa-google-plus"></i>
                            </span>
                        </a>
                    </li>
                    
                    
                    <li class="list-inline-item">
                        <a href="https://www.behance.net/">
                            <span class="footer-icon-container">
                                <i class="fa fa-behance"></i>
                            </span>
                        </a>
                    </li>
                    
                    
                    <li class="list-inline-item">
                        <a href="https://500px.com/">
                            <span class="footer-icon-container">
                                <i class="fa fa-500px"></i>
                            </span>
                        </a>
                    </li>
                    
                    
                    <li class="list-inline-item">
                        <a href="mailto:test@example.com">
                            <span class="footer-icon-container">
                                <i class="fa fa-envelope-o"></i>
                            </span>
                        </a>
                    </li>
                    
                    
                    <li class="list-inline-item">
                        <a href="\#">
                            <span class="footer-icon-container">
                                <i class="fa fa-rss"></i>
                            </span>
                        </a>
                    </li>
                    
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="footer-copyright">
                    @Untitled. All right reserved | Design & Hexo <a href="http://www.codeblocq.com/">Jonathan Klughertz</a>
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- After footer scripts -->

<!-- jQuery -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- Tween Max -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>

<!-- Gallery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

<!-- Custom JavaScript -->
<script src="/blog/js/main.js"></script>

<!-- Disqus Comments -->



</body>

</html>